<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="body-container">
    <div class="content">
      <div class="search-container">
        <div class="search-item">
          <span class="search-title">设备名称</span>
          <el-select v-model="data.selectedCamera" class="search-select" placeholder="请选择设备名称">
            <el-option
              v-for="(item,index) in cameraList"
              :key="index"
              :label="`${item.id} ${item.label}`"
              :value="item.id"
            />
          </el-select>
          <span class="search-title">日期</span>
          <el-radio-group v-model="data.date">
            <el-radio :label="1">一天</el-radio>
            <el-radio :label="2">两天</el-radio>
            <el-radio :label="3">三天</el-radio>
            <el-radio :label="4">四天</el-radio>
            <el-radio :label="0">自定义</el-radio>
          </el-radio-group>
          <el-date-picker
            class="search-date-range"
            v-if="data.date === 0"
            v-model="data.realTime"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
        <div class="search-item" style="margin-bottom:10px">
          <span class="search-title">处理结果</span>
          <el-select v-model="data.result" class="search-select" placeholder="Select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span class="search-title">告警类型</span>
          <el-select
            v-model="data.checked"
            multiple
            class="search-select"
            style="width:420px"
            placeholder="请选择告警类型"
          >
            <el-option label="人员闯入" :value="1" />
            <el-option label="未戴安全帽" :value="2" />
            <el-option label="未穿反光衣" :value="3" />
            <el-option label="未穿戴安全帽及反光衣" :value="4" />
            <el-option label="车辆违规进入" :value="5" />
            <el-option label="司机违规下车" :value="6" />
            <el-option label="车辆逆行" :value="7" />
            <el-option label="车辆超速" :value="8" />
          </el-select>
          <div class="action">
            <button class="remake" type="default">重置</button>
            <button class="query" type="primary" @click="getData">查询</button>
          </div>
        </div>
      </div>
      <div class="table-container">
        <div class="total">共检索到{{data.total || 0}}条记录</div>
        <el-button type="primary" @click="handleChnageList">批量确认处理</el-button>
      </div>
      <el-table
        ref="multipleTableRef"
        :data="data.tableData"
        @selection-change="handleSelectionChange"
        style="width: -webkit-fill-available;margin:0 20px 0 20px;"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="time" label="日期时间" width="180" />
        <el-table-column prop="camera_name" label="设备名称" width="180" />
        <el-table-column prop="camera_position" label="设备位置" />
        <el-table-column prop="camera_ip" label="IP地址" width="180" />
        <el-table-column prop="check_type" label="告警类型" width="180" />

        <el-table-column prop="remark" label="处理状态">
          <template #default="scope">
            <span>{{scope.row.is_read === 'False'?'待处理':'已处理'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="is_remark" label="处理意见" width="180">
          <template #default="scope">
            <span>{{scope.row.is_read === 'True'?'已确认处理':''}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="180">
          <template #default="scope">
            <span>{{scope.row.remark || '暂无'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="操作" width="180">
          <template #default="scope">
            <span
              class="table-action"
              @click="handleDetial(scope)"
              style="color:rgba(24, 144, 255, 1);cursor:pointer;margin-right:8px"
            >查看详情</span>
            <!-- <span
              class="table-action"
              @click="handleDetial(scope)"
              style="color:rgba(24, 144, 255, 1);cursor:pointer"
            >确认处理</span>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="data.currentPage"
        v-model:page-size="data.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="  display: flex;justify-content: flex-end;    align-items: center;height:50px;margin-top:24px;"
      />
    </div>
  </div>
  <!-- dialog -->
  <el-dialog v-model="dialogVisible" title="告警详情">
    <div class="dialog-content">
      <div class="title">
        <img src="../../assets/png/Warning.png" alt srcset />
        {{data.selectedTableData.camera_name}}-{{data.selectedTableData.camera_position}} {{data.selectedTableData.check_type}}
      </div>
      <div class="body">
        <!-- <video ref="videoRef" style="width:100%"></video> -->
        <video
          v-if="data.selectedTableData.video"
          id="my-player"
          class="video-js"
          controls
          preload="auto"
          width="100%"
          :poster="data.selectedTableData.image"
          data-setup="{}"
        >
          <source :src="data.selectedTableData.video" type="video/mp4" />
        </video>
      </div>
      <div class="footer">
        <span class="sub-title">处理意见</span>
        <el-select
          v-model="data.isRead"
          placeholder="Select"
          size="large"
          style="width: 588px;margin-right:18px;"
        >
          <el-option label="已确认处理" :value="true" />
        </el-select>
        <span class="sub-title">备注</span>
        <el-input v-model="data.remark" placeholder="可以在这里填写处理方意见或方式（选填）"></el-input>

        <!-- <span class="sub-title">处理意见</span>
        <el-input v-model="data.remark" placeholder="可以在这里填写处理方意见或方式（选填）"></el-input>-->
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">暂不处理</el-button>
        <el-button type="primary" @click="handleUpdate">确认处理</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 批量处理数据 -->
  <el-dialog v-model="dialogVisibles" title="告警详情">
    <div class="dialog-content">
      <div class="footer">
        <span class="sub-title">处理意见</span>
        <el-select
          v-model="data.isRead"
          placeholder="Select"
          size="large"
          style="width: 588px;margin-right:18px;"
        >
          <el-option label="已确认处理" :value="true" />
        </el-select>
        <span class="sub-title">备注</span>
        <el-input v-model="data.remark" placeholder="可以在这里填写处理方意见或方式（选填）"></el-input>

        <!-- <span class="sub-title">处理意见</span>
        <el-input v-model="data.remark" placeholder="可以在这里填写处理方意见或方式（选填）"></el-input>-->
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisibles = false">暂不处理</el-button>
        <el-button type="primary" @click="handleUpdate">确认处理</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, onMounted, watch, nextTick } from "vue";
import http from "../../api";
import { ElMessage } from "element-plus";
import moment from "moment";

const options = [
  { label: "全部", value: 1 },
  { label: "已确认", value: "True" },
  { label: "待处理", value: "False" }
];
const cameraList = [
  { id: " ", label: "全部" },
  { id: "C1", label: "物资码头泊位001" },
  { id: "C3", label: "物资码头泊位002" },
  { id: "C5", label: "物资码头岸边" },
  { id: "C8", label: "物资码头通道004" },
  { id: "C9", label: "物资码头地磅001" },
  { id: "C18", label: "物资码头通道003" },
  { id: "C26", label: "物资码头泊位01-2" },
  { id: "C27", label: "物资码头1/2区中1" },
  { id: "C28", label: "物资码头-油站" },
  { id: "C29", label: "物资码头-4通道" },
  { id: "C30", label: "物资码头-5通道" },
  { id: "C31", label: "物资码头-中间通道" }
];
const dialogVisible = ref(false);
const dialogVisibles = ref(false);
const multipleTableRef = ref(null);

const data = reactive({
  remark: "",
  isRead: true,
  checked: [],
  currentPage: 1,
  pageSize: 10,
  total: 0,
  selectedCamera: " ",
  result: 1,
  type: 1,
  date: 1,
  realTime: "",
  tableData: [],
  selectedTableData: {}
});
watch(
  () => dialogVisibles.value,
  curr => {
    if (!curr) {
      nextTick(() => {
        data.selectedTableData = {};
        data.remark = "";
        multipleTableRef.value.clearSelection();
      });
    }
  }
);
watch(
  () => dialogVisible.value,
  curr => {
    if (!curr) {
      nextTick(() => {
        data.selectedTableData = {};
        data.remark = "";
      });
    }
  }
);
// 确认处理
const handleUpdate = () => {
  let info = [];
  if (data.selectedTableData.length > 0) {
    info = data.selectedTableData.map(e => {
      return {
        token: e.token,
        is_read: "True",
        remark: data.remark
      };
    });
  } else {
    info = [
      {
        token: data.selectedTableData.token,
        is_read: "True",
        remark: data.remark
      }
    ];
  }
  http({
    name: "updateInfo",
    data: {
      info
    }
  })
    .then(res => {
      if (res.data.code === 20) {
        dialogVisible.value = false;
        ElMessage.success("处理成功！");
        dialogVisibles.value = false;
        getData();
      }
    })
    .catch(err => {
      console.err(err);
    });
};
const handleDetial = scope => {
  data.selectedTableData = scope.row;
  dialogVisible.value = !dialogVisible.value;
};
const handleCurrentChange = e => {
  data.currentPage = Number(e);
  getData();
};
const handleSizeChange = e => {
  data.pageSize = Number(e);
  getData();
};
const getData = () => {
  // {"action": "get_detect_info", "count": 40, "page": "1", "total_page": "2", "detect_info_list":
  //  [{"id": 43, "time": "2024-01-13 00:12:16", "camera_name": "C1", "camera_position": "\u6cca\u4f4d001_01", "camera_ip": "127.0.0.1", "check_type": "\u4eba\u5458\u68c0\u6d4b", "image": "http://192.168.0.1:8090/image/2023-12-16/4.jpg", "video": "http://192.168.0.1:8090/video/2023-12-16/4.mp3", "is_read": "False", "token": "1705075936291", "remark": ""},
  let start_time = "";
  let end_time = moment()
    .endOf("day")
    .valueOf();
  switch (data.date) {
    case 0:
      start_time = moment(data.realTime[0]).valueOf();
      end_time = moment(data.realTime[1]).valueOf();
      console.log(start_time, end_time);
      break;
    case 1:
      start_time = moment()
        .startOf("day")
        .valueOf();
      break;
    case 2:
      start_time = moment()
        .subtract(2, "days")
        .startOf("day")
        .valueOf();
      break;
    case 3:
      start_time = moment()
        .subtract(3, "days")
        .startOf("day")
        .valueOf();
      break;
    case 4:
      start_time = moment()
        .subtract(4, "days")
        .startOf("day")
        .valueOf();
      break;
  }
  http({
    name: "get_detect_info",
    data: {
      action: "get_detect_info",
      info: {
        start_time, //  # 开始时间
        end_time, // # 结束时间
        camera_name: data.selectedCamera === " " ? "" : data.selectedCamera, // # 相机的名字  如果是全部 则为空 如果是多个使用|分开 （C1|C2）,
        check_type: (data.checked || []).toString().replaceAll(",", "|"), //# 事件类型  如果是全部 则为空 如果是多个使用|分开 （1|2）,
        page: data.currentPage, //# 页数
        count: data.pageSize, //# 每页放入个数
        is_read: data.result === 1 ? "" : data.result
      }
    }
  })
    .then(res => {
      data.tableData = res.data.detect_info_list;
      data.total = res.data.count;
    })
    .catch(err => {
      console.log(err);
    });
};
const handleSelectionChange = e => {
  data.selectedTableData = e;
};
const handleChnageList = () => {
  if (data.selectedTableData?.length && data.selectedTableData?.length > 0) {
    dialogVisibles.value = true;
  } else {
    ElMessage.warning("请先选择处理数据");
  }
};
onMounted(() => {
  getData();
});
</script>

<style lang="less" scoped>
.body-container {
  flex: 1;
  padding: 24px;
  background: rgba(0, 16, 61, 1);
  position: relative;
  .content {
    background: rgba(255, 255, 255, 0.1);
    position: absolute;
    left: 24px;
    right: 24px;
    top: 24px;
    bottom: 24px;
    .search-container {
      height: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-bottom: 1px solid rgba(232, 232, 232, 1);

      margin: 10px 20px 0 20px;
      .search-item {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;
        .search-title {
          word-break: keep-all;
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.88);
          margin-right: 16px;
        }
        .search-select {
          width: 348px;
          height: 32px;
          margin-right: 60px;
        }
        :deep(.search-date-range) {
          width: 348px;
          height: 32px;
          flex-grow: 0;
          margin-left: 16px;
        }
        .action {
          flex: 1;
          display: flex;

          align-items: center;
          justify-content: flex-end;
          button {
            width: 65px;
            height: 32px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            outline: none;
            border: 0;
            cursor: pointer;
          }
          .remake {
            border: 1px solid rgba(24, 144, 255, 1);
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #1890ff;
            background: transparent;
          }
          .query {
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            background: rgba(24, 144, 255, 1);
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #ffffff;
          }
        }
      }
    }
    .table-container {
      margin: 25px 20px 20px 20px;
      display: flex;
      .total {
        flex: 1;
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        line-height: 22px;
      }
    }
  }
}
.dialog-content {
  .title {
    padding: 0 13px;
    height: 40px;
    background: #ffece8;
    border-radius: 8px;
    border: 1px solid #ffccc7;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    img {
      width: 14px;
      height: 14px;
      margin-right: 9px;
    }
  }
  .body {
    // width: 860px;
    // height: 645px;
  }
  .footer {
    margin-top: 24px;
    display: flex;
    align-items: center;
    .sub-title {
      word-break: keep-all;
      margin-right: 16px;
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.88);
    }
  }
}
/deep/.el-select__wrapper {
  background: transparent !important;
}
/deep/ .el-table th.el-table__cell {
  background: rgba(22, 32, 74, 1) !important;
}
/deep/ .cell {
  color: #ffffff;
}
/deep/ .el-table__row:hover {
  background: rgba(22, 32, 74, 1) !important;
}
/deep/ .el-table tr {
  background: rgba(49, 62, 99, 1);
}
/deep/ .el-pagination button:disabled {
  // width: 26px;
  // height: 26px;
  margin: 0 12px;
  background: #313e63;
  border-radius: 4px;
  border: 1px solid #afb8c6;
}
/deep/.el-pager li {
  // margin: 0 12px;
  background: #313e63;
  border-radius: 4px;
  border: 1px solid #afb8c6;
  font-size: 10px;
  font-family: HelveticaNeue;
  color: rgba(255, 255, 255, 0.65);
}
/deep/ .el-input__wrapper {
  background: transparent;
}
/deep/ .el-pager {
  .number {
    margin: 0 8px;
  }
  li.is-active {
    color: #409eff !important;
    background: #fff !important;
  }
}
/deep/ .btn-prev {
  margin-right: 12px;
}

/deep/ .btn-next {
  margin-left: 12px;
}
/deep/
  .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background-color: rgba(49, 62, 99, 1) !important;
}
/deep/ .el-dialog {
  background-color: rgba(49, 62, 99, 1) !important;
}
.el-dialog__title {
  width: 64px !important;
  height: 24px !important;
  font-size: 16px !important;
  font-family: PingFangSC, PingFang SC !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 24px !important;
}
/deep/ .el-input__inner {
  color: #ffffff !important;
}
</style>